<template>
  <el-container class="app-container">
    <el-row :xs="12" :sm="8" :md="6" :lg="6" :xl="3" :gutter="0" style="display: flex;justify-content: center;gap: 12px">
      <el-card shadow="always" style="border: #DCDFE6">
        <div slot="header" class="clearfix" style="display: flex;margin: 12px 12px 8px;">
          <el-tag class="el-tag-type">志愿服务</el-tag>
          <span style="margin-left: 80px;margin-top: 25px;font-size: 17px;color: #F56C6C">剩余名额 100</span>
        </div>
        <el-container direction="vertical" style="color:#909399;font-size: 15px;margin: 10px 30px 10px 10px;">
          <el-col style="margin-bottom: 12px;font-size: 22px;font-family: 宋体,serif;color: #303133;font-weight: 600">粤剧演出志愿服务</el-col>
          <el-col style="margin-bottom: 8px">发布组织：茶阳镇群丰村志愿服务队</el-col>
          <el-col style="margin-bottom: 8px">发布时间：2024-03-13 11:12:28</el-col>
          <el-col>活动地区：大埔县</el-col>
        </el-container>
      </el-card>

      <el-card shadow="always" style="border: #C0C4CC">
        <div slot="header" class="clearfix" style="display: flex;margin: 12px 12px 8px;">
          <el-tag class="el-tag-type" type="success">志愿服务</el-tag>
          <span style="margin-left: 80px;margin-top: 25px;font-size: 17px;color: #F56C6C">剩余名额 100</span>
        </div>
        <el-container direction="vertical" style="color:#909399;font-size: 15px;margin: 10px 30px 10px 10px;">
          <el-col style="margin-bottom: 12px;font-size: 22px;font-family: 宋体,serif;color: #303133;font-weight: 600">粤剧演出志愿服务</el-col>
          <el-col style="margin-bottom: 8px">发布组织：茶阳镇群丰村志愿服务队</el-col>
          <el-col style="margin-bottom: 8px">发布时间：2024-03-13 11:12:28</el-col>
          <el-col>活动地区：大埔县</el-col>
        </el-container>
      </el-card>

      <el-card shadow="always" style="border: #C0C4CC">
        <div slot="header" class="clearfix" style="display: flex;margin: 12px 12px 8px;">
          <el-tag class="el-tag-type" type="info">志愿服务</el-tag>
          <span style="margin-left: 80px;margin-top: 25px;font-size: 17px;color: #F56C6C">剩余名额 100</span>
        </div>
        <el-container direction="vertical" style="color:#909399;font-size: 15px;margin: 10px 30px 10px 10px;">
          <el-col style="margin-bottom: 12px;font-size: 22px;font-family: 宋体,serif;color: #303133;font-weight: 600">粤剧演出志愿服务</el-col>
          <el-col style="margin-bottom: 8px">发布组织：茶阳镇群丰村志愿服务队</el-col>
          <el-col style="margin-bottom: 8px">发布时间：2024-03-13 11:12:28</el-col>
          <el-col>活动地区：大埔县</el-col>
        </el-container>
      </el-card>

      <el-card shadow="always" style="border: #C0C4CC">
        <div slot="header" class="clearfix" style="display: flex;margin: 12px 12px 8px;">
          <el-tag class="el-tag-type" type="danger">志愿服务</el-tag>
          <span style="margin-left: 80px;margin-top: 25px;font-size: 17px;color: #F56C6C">剩余名额 100</span>
        </div>
        <el-container direction="vertical" style="color:#909399;font-size: 15px;margin: 10px 30px 10px 10px;">
          <el-col style="margin-bottom: 12px;font-size: 22px;font-family: 宋体,serif;color: #303133;font-weight: 600">粤剧演出志愿服务</el-col>
          <el-col style="margin-bottom: 8px">发布组织：茶阳镇群丰村志愿服务队</el-col>
          <el-col style="margin-bottom: 8px">发布时间：2024-03-13 11:12:28</el-col>
          <el-col>活动地区：大埔县</el-col>
        </el-container>
      </el-card>
    </el-row>
  </el-container>
</template>

<script>

</script>

<style scoped lang="scss">
.el-tag-type {
  margin-left: 2px;
  height: 50px;
  width: 110px;
  line-height: 45px;
  padding-top: 0;
  padding-left: 24px;
  padding-bottom: 0;
  // font-family: 黑体,serif;
  font-size: 16px;
  font-family: "微软雅黑 Light", serif;
}
</style>
